.blog{
    .blog-container{
        width: 100%;
        max-width: 1250px;
        margin: 0 auto;
//      border: 1px solid red;
        .Blog-header{
            margin: 20px 0;
            color: #8F8F9B;
            font-size: 18px;
            .blog-title{
                margin: 0;
                color: #383A49;
                font-size: 30px;
                font-weight: normal;
            }
            .Blog-header-word{
                padding: 20px 0;
                margin-right:30% ;
                overflow: hidden;
            }
            .Blog-header-search{
                margin-right: 5px;
                padding: 20px 0;
                float: right;
                position: relative;
                width: 260px;
                overflow: hidden;
                .search-input{
                    padding: 10px 80px 10px 10px;
                    font-size: 14px;
                    border: 2px solid #fff;
                    border-bottom-color: #CECED8;
                    
                }
                #blogSearch{
                    position: absolute;
                    top: 40%;
                    left: 85%;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background-image: url(../img/hf-project-icons.png);
                    background-position: 0 -20px;
                    border: none;
                    background-color: transparent;
                    cursor: pointer;
                }
            }
        }
        .blog-video-box{
            position: relative;
            .blog-video-box-bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 0 auto;
                color: #fff;
                background-color: rgba(0,0,0,0.5);
                h1{
                    margin-left: 5%;
                    font-weight: normal;
                }
                p{
                    margin-left: 5%;
                }
                .video-play{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 9;
                    margin-left: -51px;
                    margin-top: -51px;
                    width: 102px;
                    height: 102px;
                    background-image: url(../img/hf-project-icons.png);
                    background-position: -54px -81px;
                    cursor: pointer;
                }
            }
            #video{
                
            }
        }
         .bg-bottom{
            position: absolute;
            bottom: 5%;
            width: 100%;
            p{
                overflow: hidden;
            }
         }
         .blog-next{
                float: right;
                position: relative;
                z-index: 10;
                margin-right: 5%;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url(../img/hf-project-icons.png);
                background-position: -2px -51px;
                cursor: pointer;
            }
        .blog-post{
            .blog-post-left{
                position: relative;
                z-index: 15;
                float: left;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                overflow: hidden;
                width: 50%;
                color: #fff;
                background-color: #FECD18;
                .blog-post-left-title{
                    padding-left: 20px;
                    margin-bottom: 50px;
                    text-align: left;
                    .blog-title{
                        font-weight: normal;
                    }
                }
                img{
                    max-width: 100%;
                    height: auto;
                }
                .post-left-bottom{
                    padding-left: 20px;
                    margin-bottom: 20px;
                    text-align: left;
                }
                &:hover{
                    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
                }
                &:hover img{
                    transform: scale(1.2,1.2);
                    transition: all 1s;
                }
            }
            .blog-post-right{
                float: left;
                width: 50%;
                font-size: 14px;
                .post-right-top{
                    position: relative;
                    z-index: 14;
                    padding: 12% 0 18% 0;
                    color: #fff;
                    text-align: center;
                    background-color: #00BFF5;
                    .blog-point-two{
                        display: inline-block;
                        width: 35px;
                        height: 27px;
                        background-image: url(../img/hf-project-icons.png);
                        background-position: -3px -84px;
                    }
                    .blog-post-word{
                        margin: 10px 20px;
                        line-height: 30px;
                        font-weight: normal;
                    }
                    .box-bottom{
                        position: absolute;
                        bottom: 20px;
                        width: 100%;
                        .blog-page{
                            float: left;
                            margin-left: 5%;
                        }
                        .blog-next{
                            float: right;
                        }
                    }
                    &:hover{
                        box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
                    }
                }  
                .post-right-bottom{
                    .post-right-bottom-left{
                        position: relative;
                        z-index: 12;
                        padding: 7% 0;
                        width: 50%;
                        height: 100%;
                        float: left;
                        color: #9B9EA5;
                        text-align: center;
                        .blog-title{
                            color: #3C3A52;
                        }
                        p{
                            margin: 0 10px;
                        }
                        .box-bottom{
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            .blog-page{
                                float: left;
                                margin-left: 5%;
                            }
                            .blog-next{
                                background-position: -16px -52px;
                            }
                        }
                        &:hover{
                            box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
                        }
                    }
                    .post-right-bottom-right{
                        position: relative;
                        z-index: 11;
                        width: 50%;
                        float: left;
                        padding: 6% 0;
                        background: #E1E1E1;
                        &:hover{
                            box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
                        }
                    }
                }
                
            }
            .blog-post-right{
                .post-top-adjustColor{
                    background-color: #F14E4F;
                    position: relative;
                    z-index: 17;
                    .blog-point-two{
                        width: 40px;
                        background-position: -4px -120px;
                    }
                }
            }
            
            .poat-right-adjustColor{
                background-color: #CCDB38;
                
            }
            .blog1-image{
                margin-left: 20%;
                margin-bottom: 50px;
            }
            .post-right-bottom-right{
                position: relative;
                z-index: 16;
                padding: 5% 0;
                .play-btn1{
                    position: absolute;
                    left: 50%;
                    top: 30%;
                    z-index: 99;
                    margin-left: -36px;
                    display: block;
                    width: 25%;
                    height: 30%;
                    background-image: url(../img/hf-播放.png);
                    background-size: 100% 100%;
                    cursor: pointer;
                }
                .play-btn2{
                    position: absolute;
                    left: 50%;
                    top: 30%;
                    z-index: 99;
                    margin-left: -36px;
                    display: block;
                    width: 25%;
                    height: 30%;
                    background-image: url(../img/hf-暂停.png);
                    background-size: 100% 100%;
                    cursor: pointer;
                    display: none;
                }
                .play-bar{
                    display: block;
                    margin-left: 10%;
                    margin-top: 45%;
                    width: 82%;
                    height: 14px;
                    background-image: url(../img/hf-project-icons.png);
                    background-position: -4px 20px;
                }
            }
      }
      .blog-pics{
          position: relative;
          overflow: hidden; 
          .blog-pics-box{
//           width: 1250px * 5;
            .blog-pics-item{
                 
            }
            img{
                float: left;
                max-width: 100%;
            }
          }
          .pics-spot{
              position: absolute;
              bottom: 20px;
              left: 50%;
              margin-left: -35px;
              .picsSpot{
                  float: left;
                  margin-right: 5px;
                  width: 10px;
                  height: 10px;
                  border-radius: 100%;
                  border: 1px solid #fff;
                  cursor: pointer;
              }
              .selectPicsSpot{
                  float: left;
                  margin-right: 5px;
                  width: 10px;
                  height: 10px;
                  border-radius: 100%;
                  border: 1px solid #fff;
                  background-color: #fff;
                  cursor: pointer;
              }
          }
          #blogPicsNext{
              position: absolute;
              bottom: 20px;
              right: 0;
          }
      }
      .blog-btn{
         margin: 50px 0;
         width: 130px;
         height: 50px;
         text-align: center;
         line-height: 50px;
         color: #BBBBC5;
         border: 2px solid #CECED8;
         border-radius: 50px;
         margin: 6% auto;
         cursor: pointer;
         &:hover{
             color: #fff;
             background-color: #89CB27;
             border: 2px solid #89CB27;
         }
       }
    }
}

@media only screen and (max-width:768px){
    
    #adjustSearch{
        float: none;
    }
    .blog{
        .blog-container{
            .blog-post{
                .blog-post-left{
                    float: none;  
                }
                .blog-post-right{
                    float: none;
                    width: 100%;
              }
            }
        }
    }    
}

